import {FlatList, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {ImgText, ObserverText, ObserverView} from '../../../components';
import {
  dpw10,
  dpw12,
  dpw122,
  todayKey,
  dpw240,
  dpw180,
  dpw8,
} from '../../../constants';
import {BindItem, BtnItem} from '../../../mobx/home';
import {observer} from 'mobx-react-lite';
import {useUserInfoStore} from '../../../mobx';

const getTodayKey = () => {
  if (todayKey === 0) return 7;
  return todayKey;
};

const TodayUpdate = observer((props: any) => {
  const {list, btnList, navigation, typeId} = props || {};
  const {userInfo} = useUserInfoStore();

  const onPress = () => {
    if (navigation) {
      navigation.navigate('today-update', {typeId});
    }
  };

  const goDetail = ({BID}: {BID: number}) => {
    if (navigation) {
      if (!userInfo?.Token) {
        navigation.navigate('Login');
      } else if (BID) {
        navigation.navigate('cartoon-detail', {bId: BID});
      }
    }
  };

  const _renderItem = ({item, index}: {item: BindItem; index: number}) => {
    if (item.BID === -1) {
      if (Array.isArray(btnList) && btnList.length > 0) {
        return (
          <>
            {btnList.map((it: BtnItem, idx) => (
              <TouchableOpacity key={it.BtnId + 'btn1' + idx} onPress={onPress}>
                <ObserverView
                  style={{...styles.box, ...styles.more}}
                  themeStyle={{backgroundColor: 'color_12'}}>
                  <ObserverText tKey={it.Title} type="desc" />
                </ObserverView>
              </TouchableOpacity>
            ))}
          </>
        );
      }
      return null;
    }
    return (
      <View style={{...styles.box, marginLeft: index === 0 ? dpw12 : 0}}>
        <ImgText {...item} isHor={false} isTag toDetail={goDetail} />
      </View>
    );
  };

  return (
    <ObserverView>
      <FlatList
        data={[...list[getTodayKey()], {BID: -1}]}
        horizontal={true}
        renderItem={_renderItem}
        keyExtractor={item => `${item.BID}`}
        showsHorizontalScrollIndicator={false}
      />
    </ObserverView>
  );
});

export default TodayUpdate;

const styles = StyleSheet.create({
  box: {
    width: dpw122,
    height: dpw240,
    marginRight: dpw10,
  },
  more: {
    height: dpw180,
    borderRadius: dpw8,
    alignItems: 'center',
    justifyContent: 'center',
  },
  img: {
    width: '100%',
  },
});
